<template>
  <!-- @closed="editing=false" 关闭屉式菜单  重置编辑状态为不编辑 -->
  <van-action-sheet
    :value="value"
    @closed="editing=false"
    @input="$emit('input', $event)"
    title="编辑频道"
  >
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button v-if="!editing" @click="editing=true" size="mini" type="info" plain class="edit">编辑</van-button>
        <van-button v-else @click="editing=false" size="mini" type="danger" plain class="edit">完成</van-button>
      </div>
      <van-grid class="van-hairline--left">
          <!-- 我的频道列表 -->
        <van-grid-item v-for="(item,index) in channelList" :key="item.id">
            <!--
              根据当前传递过来的索引，添加类名，高亮频道名称
              判断如果当前遍历的索引值等于父组件传过来的索引值那么就给他添加类名
            -->
          <span class="f12" @click="goChannel(index)" :class="{red: articleIndex === index}">{{item.name}}</span>
          <van-icon @click="delChannel(item.id, index)" v-show="editing" class="btn" name="cross"></van-icon>
        </van-grid-item>
        <!-- / 我的频道列表 -->
      </van-grid>
    </div>
    <div class="channel">
      <div class="tit">可选频道：</div>
      <!-- 可选频道列表 -->
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="(channel, i) in canSel" :key="i">
          <span class="f12">{{channel.name}}</span>
          <van-icon @click="addChannels(channel)" class="btn" name="plus"></van-icon>
        </van-grid-item>
      </van-grid>
      <!-- / 可选频道列表 -->
    </div>
  </van-action-sheet>
</template>

<script>
import { getChannels, delChannel, addChannel } from '../../../api/channel'
export default {
  props: {
    // 打开/关闭的状态
    value: {
      type: Boolean,
      default: false
    },
    // 当前登录账号的频道列表
    channelList: {
      type: Array,
      default: () => []
    },
    // 频道栏切换时的索引值
    articleIndex: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // 使用计算属性从全部频道数据中筛选我的频道数据
    canSel () {
      // 从所有频道中筛选我的频道数据
      return this.allChannels.filter((all) => {
        // 排除我的频道数据。如果当前全部频道中包含我的频道数据，那么取反，把我的频道数据排除
        return !this.channelList.some((my) => my.id === all.id)
      })
    }
  },
  data () {
    return {
      // 编辑状态
      editing: false,
      allChannels: [] // 所有频道列表
    }
  },
  methods: {
    // 调用获取所有频道的接口
    async getChannels () {
      const { status, data } = await getChannels()
      // console.log(data)
      if (status === 200) {
        // 将获取到所有频道赋值给data中的数组
        this.allChannels = data.channels
      }
    },
    // 根据索引值跳转到当前的频道，并且渲染新闻列表
    goChannel (i) {
      // console.log(i)  // 当前点击索引值
      // 关闭弹出层
      this.$emit('input', false)
      // 根据索引值打开对应的频道，渲染对应的新闻列表
      this.$emit('update:articleIndex', i)
    },
    // 注册删除频道方法
    async delChannel (id, i) {
      try {
        await delChannel(id)
        this.$toast.success('删除成功')
        // 根据当前删除的索引值，如果当前删除的是高亮频道的前面数据，那么需要更新索引值
        if (i < this.articleIndex) {
          // 更新索引值，删除当前索引值，需要当前索引值 -1
          this.$emit('update:articleIndex', this.articleIndex - 1)
        }
        // 刷新页面  也就是把当前账号的频道列表数组截取
        this.channelList.splice(i, 1)
      } catch (error) {
        this.$toast.fail('删除失败')
      }
    },
    // 添加频道的方法
    async addChannels (channel) {
      // 接口需要的是对象格式的数据 channel: {id: 当前添加频道的id, seq: 当前添加频道的序号}
      // 处理接口数据 => 新的 => 我的频道数据 => 后天需要的
      // 定义新的方法
      const newChannel = this.channelList.map((item, i) => {
        return {
          id: item.id,
          seq: i
        }
      })
      // 向新的频道数据添加数据，
      newChannel.push({ ...channel, seq: newChannel.length })
      // 删除数组第一项  默认推荐
      newChannel.shift()
      // 调用方法发送ajax
      try {
        await addChannel(newChannel)
        this.$toast.success('添加成功')
        this.channelList.push({ ...channel })
      } catch (error) {
        this.$toast.fail('添加失败')
      }
    }
  },
  created () {
    this.getChannels()
  }
}
</script>

<style lang="less" scoped>
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #d43d3d;
    color: #fff;
    .van-icon-close,
    .van-action-sheet__close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit {
    line-height: 3;
    text-align:left;
    .tip {
      font-size: 10px;
      color: #999;
    }
    .edit {
      color: #d43d3d;
      border:#d43d3d
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12 {
    font-size: 12px;
    color: #555;
  }
  .red {
    color: #d43d3d;
  }
}
</style>
